<html>
    <head>
        <title><g:layoutTitle default="Grails" /></title>
        <link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
        <link rel="stylesheet" href="${resource(dir:'css/smoothness',file:'jquery-ui-1.7.2.custom.css')}" />
        <link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
        <g:javascript library="application" />
        <g:javascript library="jquery-1.3.2.min" />
        <g:javascript library="jquery-ui-1.7.2.custom.min" />

        <style type="text/css">
			.systemTitle {
				font-weight: bold;
				position: relative;
				top: -12px;
				left: -25px;
			}
			.menu {
				float: left;
				width: 150px;
				border: 1px dotted #cccccc;
				margin: 8px;
				padding: 8px;
			}
			
			.layoutBody {
				float: left;
			}
			li {
				padding: 4px;
			}
			
			img {
				border: 0px;
			}
	    </style>
	    <script type="text/javascript">				
	    	$(function(){
				$(".menuButton").mouseover(function(){
					$(this).css("background-color", "#98FB98");	
				}).mouseout(function(){
					$(this).css("background-color", "");
				});

				$(".menu").find("a").mouseover(function(){
					$(this).css("background-color", "#98FB98");	
				}).mouseout(function(){
					$(this).css("background-color", "");
				});

				$(".button").mouseover(function(){
					$(this).css("background-color", "#98FB98");	
				}).mouseout(function(){
					$(this).css("background-color", "");
				});
				
				$(".deletePerson").mouseover(function(){
					$(this).css("background-color", "#ff0000");	
				}).mouseout(function(){
					$(this).css("background-color", "");
				});

				$("input[type='text']:first", document.forms[0]).focus();
	    	});
		</script>
		<g:layoutHead />
    </head>
    <body>
        <div id="spinner" class="spinner" style="display:none;">
           	<img src="${resource(dir:'images',file:'spinner.gif')}" alt="Spinner" />
        </div>	
        <div class="logo">
			<a href="http://localhost:8080/vrs">
        	<img src="${resource(dir:'images',file:'top_11.gif')}" alt="wg2009_top"/>
           	</a>
        	<span class="systemTitle">志工簽到系統</span>
        </div>
        <table><tr>
        <td style="width:150px;">
        <div class="menu">
    		<ul>
    			<li><g:link controller="activity" action="select" params="[type:'register']">簽到</g:link></li>
    			<li><g:link controller="activity" action="select" params="[type:'done']">簽退</g:link></li>
    			<li>管理
    				<ul>
    					<li>
    						<g:link controller="person" action="list">志工</g:link>
    						<ul>
    							<li><g:link controller="person" action="create">新建</g:link></li>
    							<li><g:link controller="person" action="upload">上傳</g:link></li>
    							<li><g:link controller="person" action="download">下載</g:link></li>
    							<li><g:link controller="person" action="search">搜尋</g:link></li>
    						</ul>
    					</li>
    					<li>
    						<g:link controller="activity" action="list">活動</g:link>
    						<ul>
    							<li><g:link controller="activity" action="create">新建</g:link></li>
    							<li><g:link controller="record" action="activitySelect">建立應出席人員</g:link></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li>查詢</li>
    		</ul>
    	</div>
    	</td>
    	<td>
    		<div class="layoutBody" />
        		<g:layoutBody />
        	</div>		
    	</td>
    	</tr></table>
    </body>	
</html>